<template>
	<el-form ref="formRef" :model="form" label-width="120px">
		<!-- 分类名称  -->
		<el-form-item prop="name" label="分类名称" style="width: 92%">
			<el-input v-model="form.name" placeholder="请填写分类名称" />
		</el-form-item>
		<!-- 是否为二级分类 -->
		<el-form-item label="二级分类">
			<el-radio-group v-model="showMore">
				<el-radio :label="true" :disabled="form.id !== 0 && !form.pid">是</el-radio>
				<el-radio :label="false" :disabled="form.id !== 0 && !form.pid">否</el-radio>
			</el-radio-group>
		</el-form-item>
		<!-- 上级分类 -->
		<el-form-item v-show="showMore" label="上级分类" prop="pid">
			<el-select v-model="form.pid" placeholder="请选择上级分类名称">
				<el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
			</el-select>
		</el-form-item>
		<!-- 分类图片 -->
		<el-form-item label="分类图片" v-show="showMore">
			<el-upload ref="uploadRef" class="upload-demo" v-model:file-list="fileList" :action="uploadPictureURL()" :headers="{ jwt: token }" :data="{ type: 'category_picture' }" :limit="1" :on-exceed="handleExceed" :on-success="uploadSuccess">
				<template #trigger>
					<el-button type="primary">请选择图片</el-button>
				</template>
				<template #tip>
					<div class="el-upload__tip">图片文件大小不超过500KB</div>
				</template>
			</el-upload>
		</el-form-item>
		<!-- 操作按钮 -->
		<el-form-item>
			<el-button type="primary" @click="editSubmit" v-if="id">修改</el-button>
			<el-button type="primary" @click="addSubmit" v-else>新增</el-button>
			<el-button @click="btnCancel">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getCategory, getCategoryList, uploadPictureURL, addCategory, editCategory } from '../api'
import useToken from '../stores/token'
import notification from '../utils/notification'

const props = defineProps({
	id: {
		type: Number,
	},
})

const emit = defineEmits(['success'])

const form = reactive({
	id: props.id,
	name: '',
	pid: '',
	picture: '',
})

const formRef = ref()
const categoryList = ref([])
const showMore = ref(false)
const fileList = ref([])
const uploadRef = ref()
const { token } = useToken()

onMounted(() => {
	loadCategory()
})

const loadCategory = async () => {
	if (form.id) {
		const data = await getCategory({ id: form.id })
		if (data.picture !== '') {
			const fileName = data.picture.substring(data.picture.lastIndexOf('/') + 1)
			if (fileName) {
				fileList.value = [{ name: fileName, url: data.picture }]
			}
		}
		Object.assign(form, data)
	}
	const list = await getCategoryList()
	categoryList.value = list.filter(item => item.pid == 0)
	showMore.value = form.pid != 0
}

const resetForm = id => {
	form.id = id
	btnCancel()
}

defineExpose({ resetForm })

// 新增操作
const addSubmit = async () => {
	const data = {
		name: form.name,
		picture: form.picture,
		pid: form.pid,
	}
	if (await addCategory(data)) {
		emit('success')
	}
}

// 修改操作
const editSubmit = async () => {
	if (await editCategory(form)) {
		emit('success')
	}
}

// 重置表单
const btnCancel = () => {
	formRef.value.resetFields()
	form.picture = ''
	uploadRef.value.clearFiles()
	loadCategory()
}

// 文件超出个数限制时替换已有图片
const handleExceed = files => {
	uploadRef.value.clearFiles()
	uploadRef.value.handleStart(files[0])
	uploadRef.value.submit()
}

// 上传成功
const uploadSuccess = response => {
	console.log('CategoryEdit.vue - uploadSuccess：', response)

	const { code, msg, data } = response
	if (code !== 0) {
		notification({
			message: msg,
			type: 'error',
		})
	} else {
		notification({
			message: msg,
			type: 'success',
		})
		form.picture = data.image
	}
}
</script>

<style scoped>
.upload-demo {
	text-align: left;
	width: 91%;
}
</style>
